<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dashboard Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="libs/bootstrap/4.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="libs/bootstrap/4.0/css/dashboard.css" rel="stylesheet">
    <link href="libs/bootstrap/4.0/css/bootstrap-table.min.css" rel="stylesheet">

    <link href="libs/bootstrap/4.0/css/bootstrap-table.min.css" rel="stylesheet">
    <link href="libs/bootstrap/4.0/css/bootstrap-table-fixed-columns.min.css" rel="stylesheet">
    <link href="libs/bootstrap/4.0/css/bootstrap-editable.css" rel="stylesheet">
    <script src="libs/js/popper.min.js"></script>
    <link href="https://cdn.jsdelivr.net/gh/Talv/x-editable@develop/dist/bootstrap4-editable/css/bootstrap-editable.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/Talv/x-editable@develop/dist/bootstrap4-editable/js/bootstrap-editable.min.js"></script>
</head>
<style>
    .mr10 {
        margin-right: 10px;
    }
</style>

<body>


<div>
    <label class="checkbox">
        <input id="height" type="checkbox" checked> Enable Height
    </label>
</div>
<div class="form-inline">
    <span class="mr10">Fixed Number: </span>
    <input class="form-control mr10" id="fixedNumber" type="number" value="2" min="1" max="5">
    <span class="mr10">Fixed Right Number: </span class="mr10">
    <input class="form-control" id="fixedRightNumber" type="number" value="2" min="0" max="5">
</div>
<div class="toolbar form-inline">
    <span class="mr10">Cells: </span>
    <input class="form-control mr10" id="cells" type="number" value="20" min="1" max="30">
    <span class="mr10">Rows: </span class="mr10">
    <input class="form-control mr10" id="rows" type="number" value="20" min="1" max="50">
    <button id="build" class="btn btn-secondary">Rebuild Table</button>
</div>
<table id="table">
    <thead>
    <tr>
        <th data-field="code">ID</th>
        <th data-field="name" data-editable="true">Item Name</th>
        <th data-field="queryDate" data-editable="true">Item Price</th>
    </tr>
    </thead>

</table>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="libs/js/jquery-3.1.1.slim.min.js"></script>
<script src="libs/js/tether.min.js"></script>
<script src="libs/js/bootstrap.min.js"></script>
<script src="libs/js/common.js"></script>
<script src="libs/js/jquery.js"></script>
<script src="libs/js/dashboard/index.js"></script>
<script src="libs/js/bootstrap-table.js"></script>
<script src="libs/js/dashboard/basedata.js"></script>

<script src="libs/js/bootstrap-table.min.js"></script>
<script src="libs/js/bootstrap-table-fixed-columns.min.js"></script>
<script src="libs/js/bootstrap-editable.min.js"></script>

<script>
    var $table = $('#table')

    function buildTable($el) {
        var data = [{
            "code": "300396",
            "name": "迪瑞医疗",
            "queryDate": "20200620",
            "startDate": "20190101",
            "endDate": "20200620",
            "moreThanMa250Count": 262,
            "pre1ConformCount": 13,
            "pre2ConformCount": 15,
            "pre3ConformCount": 13,
            "pre4ConformCount": 12,
            "pre5ConformCount": 13,
            "pre6ConformCount": 12,
            "pre7ConformCount": 13,
            "incrementCount": 191,
            "conceptName": "创业板综 吉林板块 体外诊断 医疗器械 医疗行业 证金持股",
            "czxbj_pm": "38",
            "czxbj_jbmgsyzzlfh": "14.71",
            "gzbj_pm": "18",
            "gzbj_peg": "2.22",
            "dbfxbj_pm": "33",
            "dbfxbj_roepj": "15.15",
            "gsgmzsz_pm": "43",
            "gsgmzsz_zsz": "72.5亿"
        }, {
            "code": "600456",
            "name": "宝钛股份",
            "queryDate": "20200620",
            "startDate": "20190101",
            "endDate": "20200620",
            "moreThanMa250Count": 256,
            "pre1ConformCount": 129,
            "pre2ConformCount": 134,
            "pre3ConformCount": 172,
            "pre4ConformCount": 180,
            "pre5ConformCount": 214,
            "pre6ConformCount": 226,
            "pre7ConformCount": 212,
            "incrementCount": 190,
            "conceptName": "3D打印 大飞机 航母概念 军工 融资融券 陕西板块 稀缺资源 小金属 新材料 有色金属 预盈预增 证金持股",
            "czxbj_pm": "8",
            "czxbj_jbmgsyzzlfh": "24.98",
            "gzbj_pm": "15",
            "gzbj_peg": "1.81",
            "dbfxbj_pm": "40",
            "dbfxbj_roepj": "3.76",
            "gsgmzsz_pm": "28",
            "gsgmzsz_zsz": "114亿"
        }, {
            "code": "600070",
            "name": "浙江富润",
            "queryDate": "20200620",
            "startDate": "20190101",
            "endDate": "20200620",
            "moreThanMa250Count": 245,
            "pre1ConformCount": 85,
            "pre2ConformCount": 92,
            "pre3ConformCount": 92,
            "pre4ConformCount": 93,
            "pre5ConformCount": 97,
            "pre6ConformCount": 93,
            "pre7ConformCount": 108,
            "incrementCount": 182,
            "conceptName": "参股保险 参股银行 长江三角 大数据 电子信息 独角兽 沪股通 华为概念 机构重仓 口罩 区块链 上证380 浙江板块",
            "czxbj_pm": ">46",
            "czxbj_jbmgsyzzlfh": "--",
            "gzbj_pm": ">45",
            "gzbj_peg": "--",
            "dbfxbj_pm": "27",
            "dbfxbj_roepj": "11.83",
            "gsgmzsz_pm": "61",
            "gsgmzsz_zsz": "55.6亿"
        }, {
            "code": "000523",
            "name": "广州浪奇",
            "queryDate": "20200620",
            "startDate": "20190101",
            "endDate": "20200620",
            "moreThanMa250Count": 230,
            "pre1ConformCount": 215,
            "pre2ConformCount": 214,
            "pre3ConformCount": 215,
            "pre4ConformCount": 216,
            "pre5ConformCount": 214,
            "pre6ConformCount": 216,
            "pre7ConformCount": 215,
            "incrementCount": 177,
            "conceptName": "工业大麻 广东板块 国企改革 化工行业 土地流转 消毒剂 粤港自贸",
            "czxbj_pm": ">74",
            "czxbj_jbmgsyzzlfh": "--",
            "gzbj_pm": ">73",
            "gzbj_peg": "--",
            "dbfxbj_pm": ">153",
            "dbfxbj_roepj": "2.40",
            "gsgmzsz_pm": "115",
            "gsgmzsz_zsz": "35.1亿"
        }, {
            "code": "002476",
            "name": "宝莫股份",
            "queryDate": "20200620",
            "startDate": "20190101",
            "endDate": "20200620",
            "moreThanMa250Count": 225,
            "pre1ConformCount": 196,
            "pre2ConformCount": 194,
            "pre3ConformCount": 201,
            "pre4ConformCount": 198,
            "pre5ConformCount": 191,
            "pre6ConformCount": 212,
            "pre7ConformCount": 198,
            "incrementCount": 184,
            "conceptName": "股权转让 化工行业 壳资源 融资融券 山东板块 页岩气",
            "czxbj_pm": ">74",
            "czxbj_jbmgsyzzlfh": "--",
            "gzbj_pm": ">73",
            "gzbj_peg": "--",
            "dbfxbj_pm": "153",
            "dbfxbj_roepj": "-6.05",
            "gsgmzsz_pm": "117",
            "gsgmzsz_zsz": "34.9亿"
        }, {
            "code": "002729",
            "name": "好利来",
            "queryDate": "20200620",
            "startDate": "20190101",
            "endDate": "20200620",
            "moreThanMa250Count": 220,
            "pre1ConformCount": 166,
            "pre2ConformCount": 139,
            "pre3ConformCount": 135,
            "pre4ConformCount": 134,
            "pre5ConformCount": 136,
            "pre6ConformCount": 148,
            "pre7ConformCount": 153,
            "incrementCount": 161,
            "conceptName": "LED 电子元件 福建板块 太阳能 新能源车 证金持股",
            "czxbj_pm": ">106",
            "czxbj_jbmgsyzzlfh": "--",
            "gzbj_pm": ">106",
            "gzbj_peg": "--",
            "dbfxbj_pm": "155",
            "dbfxbj_roepj": "5.09",
            "gsgmzsz_pm": "222",
            "gsgmzsz_zsz": "23.3亿"
        }, {
            "code": "300674",
            "name": "宇信科技",
            "queryDate": "20200620",
            "startDate": "20190101",
            "endDate": "20200620",
            "moreThanMa250Count": 60,
            "pre1ConformCount": 63,
            "pre2ConformCount": 64,
            "pre3ConformCount": 60,
            "pre4ConformCount": 54,
            "pre5ConformCount": 74,
            "pre6ConformCount": 64,
            "pre7ConformCount": 76,
            "incrementCount": 75,
            "conceptName": "百度概念 北京板块 创投 创业板综 创业成份 大数据 国产软件 互联金融 区块链 软件服务 深成500 深股通 预盈预增",
            "czxbj_pm": "47",
            "czxbj_jbmgsyzzlfh": "31.19",
            "gzbj_pm": "35",
            "gzbj_peg": "1.94",
            "dbfxbj_pm": "43",
            "dbfxbj_roepj": "15.55",
            "gsgmzsz_pm": "39",
            "gsgmzsz_zsz": "168亿"
        }];
        $el.bootstrapTable('destroy').bootstrapTable({
            height: $('#height').prop('checked') ? 600 : undefined,
            columns: [{
                field: 'code',
                title: '代码',
            }, {
                field: 'name',
                title: '名称',
            }, {
                field: 'queryDate',
                title: '查询时间',
            }, {
                field: 'moreThanMa250Count',
                title: '超过250日线的量',
                sortable: true,
            }, {
                field: 'pre1ConformCount',
                title: '倒数1天',
                sortable: true,
            }, {
                field: 'pre2ConformCount',
                title: '倒数2天',
                sortable: true,
            }, {
                field: 'pre3ConformCount',
                title: '倒数3天',
                sortable: true,
            }, {
                field: 'pre4ConformCount',
                title: '倒数4天',
                sortable: true,
            }, {
                field: 'pre5ConformCount',
                title: '倒数5天',
                sortable: true,
            }, {
                field: 'pre6ConformCount',
                title: '倒数6天',
                sortable: true,
            }, {
                field: 'pre7ConformCount',
                title: '倒数7天',
                sortable: true,
            }, {
                field: 'incrementCount',
                title: '上涨天数',
                sortable: true,
            }, {
                field: 'conceptName',
                title: '相关概念',
            }, {
                field: 'czxbj_pm',
                title: '成长性比较排名',
            }, {
                field: 'czxbj_jbmgsyzzlfh',
                title: '成长性比较3年复合',
            }, {
                field: 'gzbj_pm',
                title: '估值比较排名',
            }, {
                field: 'gzbj_peg',
                title: '估值比较ROE',
            }, {
                field: 'dbfxbj_pm',
                title: '杜邦分析比较排名',
            }, {
                field: 'dbfxbj_roepj',
                title: '杜邦分析比较ROE(%)',
            }, {
                field: 'gsgmzsz_pm',
                title: '公司规模排名',
            }, {
                field: 'gsgmzsz_zsz',
                title: '公司规模总市值(元)',
                editable: true,
            },
                {
                    field: "UserName",
                    title: "用户名",
                }
                , {
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    events: "operateEvents",
                    formatter: operateFormatter
                }

            ],
            onClickCell: function (field, value, row, $element) {
                if (field != "UserName") return;
                $element.attr('contenteditable', true);
                $element.blur(function () {
                    let index = $element.parent().data('index');
                    let tdValue = $element.html();

                    saveData(index, field, tdValue);
                })
            },
            data: data,
            editable: true,//开启编辑模式
            toolbar: '.toolbar',
            search: true,
            showColumns: true,
            clickToSelect: true,
            fixedColumns: true,
            fixedNumber: +$('#fixedNumber').val(),
            fixedRightNumber: +$('#fixedRightNumber').val(),

            onEditableSave: function (field, row, oldValue, $el) {
                $.ajax({
                    type: "post",
                    url: "/Editable/Edit",
                    data: row,
                    dataType: 'JSON',
                    success: function (data, status) {
                        if (status == "success") {
                            alert('提交数据成功');
                        }
                    },
                    error: function () {
                        alert('编辑失败');
                    },
                    complete: function () {

                    }

                });
            }
        })
    }

    function operateFormatter(value, row, index) {
        return [
            '<button type="button" class="RoleOfD btn btn-default  btn-sm" style="margin-right:15px;">绑定</button>',
            '<button type="button" class="RoleOfEdit btn btn-default  btn-sm" style="margin-right:15px;">编辑</button>'
        ].join('');
    }

    window.operateEvents = {
        'click .RoleOfD': function (e, value, row, index) {
            alert(row.code + "|" + row.UserName);
        },
        'click .RoleOfEdit': function (e, value, row, index) {
            alert(row.code);
        }
    };

    function saveData(index, field, value) {
        $table.bootstrapTable('updateCell', {
            index: index,       //行索引
            field: field,       //列名
            value: value        //cell值
        })
    }

    $(function () {
        buildTable($table)

        $('#build').click(function () {
            buildTable($table)
        })
    })
</script>
</body>
</html>
